<template>
	<view class="context">
		<view class="title-box"><text class="s-tit">{{ title }}</text><text class="quick-btn" @click="onQuickFill()"
				v-show="(specList && specList.length > 0) && (unitList && unitList.length > 1) || (specList && specList.length > 1) && (unitList && unitList.length > 0)">{{
						titleTxt
				}}</text></view>
		<view>{{ titleDesc }}</view>
		<view class="spec-box" v-for="(item, index) in specList" :key="index">
			<text>{{ item.titles ? "规格:" + item.titles : '' }}</text>
			<view class="p-box">
				<view class="item-list" v-for="(item1, index1) in unitList" :key="index1">
					<view class="u-box">
						<comConvert :ref="item.ids + '_' + item1.id" :id="item.ids + '_' + item1.id"
							:covernum="mapCost[item.ids + '_' + item1.id]" :minUnil="item1.title"
							@changInputTxt="changInputTxt">
						</comConvert>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import comConvert from "../comm/ComConvert.vue";
import goodsCtrl from "../../js/gd/GoodsCtrl.js";
import goodsTlpCtrl from "../../js/gd/GoodsTlpCtrl.js";
import eventCtrl from "../../js/event/EventCtrl.js";
export default
	{
		components: { comConvert },
		props: ["title", "titleTxt", "titleDesc"],
		data() {
			return {
				specList: [],
				unitList: [],
				costQuoteType: 0,
				mapCost: {},
			}
		},
		methods:
		{
			/***初始化数据****/
			initData() {
				this.specList = [];
				this.unitList = [];
				this.specList = goodsCtrl.getCostSpecArr();
				this.unitList = goodsCtrl.getCostUnit();
				this.mapCost = goodsCtrl.setSpecUnitCost(); //goodsCtrl.getCost();
				this.costQuoteType = goodsTlpCtrl.getCostQuoteType();
			},

			/***改变成本***/
			changInputTxt(data) {
				goodsCtrl.changeCost(data);
			},

			/****快速填充价格****/
			onQuickFill() {
				goodsCtrl.qucklyFillCost();
			},

			/****成本改变更新*****/
			onChangeCostEvent(data) {
				this.removeEvent();
				if (this.$refs[data.id] && this.$refs[data.id][0] && this.$refs[data.id][0].updateInputTxt) {
					this.$refs[data.id][0].updateInputTxt(data);
				}
				this.addEvent();
			},

			addEvent() {
				uni.$on(eventCtrl.CHANGE_COST_EVENT, this.onChangeCostEvent);
			},

			removeEvent() {
				uni.$off(eventCtrl.CHANGE_COST_EVENT);
			},
		},

		mounted() {
			this.addEvent();
		},
	}
</script>

<style lang="scss">
.context {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 13px;

	.title-box {
		margin-bottom: 10px;

		.s-tit {
			font-weight: bold;
			padding-right: 10px;
		}

		.quick-btn {
			color: #fff;
			background-color: #3388ff;
			padding: 5px;
			cursor: pointer;
			border-radius: 4px;
		}
	}

	.p-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.item-list {
			.u-box {
				padding-right: 10px;
				padding-top: 4px;
				padding-bottom: 4px;
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
}
</style>
